<template>
	<div class="h-full pt-5 px-[25px] md:px-[35px] flex flex-col">
		<div class="flex justify-center relative mb-5" @click="emits('avatar')">
			<account-avatar :data="userInfo?.avatar" :width="100" :toProfile="false" />
			<div class="absolute -bottom-[1px] size-25 rounded-full overflow-hidden cursor-pointer">
				<div
					class="absolute bottom-0 w-full text-center text-lg"
					style="background-color: rgba(0, 0, 0, 0.5)">
					{{ $t('action.edit') }}
				</div>
			</div>
		</div>
		<base-text textT="profile.signature" class="mb-1 text-sm text-t-4" />
		<base-textarea v-model="signature" :placeholder="$t('profile.signaturePlaceholder')" />
		<base-button
			class="mt-5 mb-10"
			type="primary"
			textT="action.submit"
			:loading="loading"
			@click="save" />
		<profile-nickname v-model="nicknameShow" @success="nicknameShow = false" />
	</div>
</template>

<script lang="ts" setup>
import { BaseButton, BaseText, BaseTextarea } from '@/components/base'
import { useProfileStore } from '@/store'
import { updateSignature } from '@/api/profile'
import { useRequest } from '@/hooks'
import { UserInfo } from '@/types'
import { computed, ref, watch } from 'vue'
import { AccountAvatar } from '@/components/account/'
import ProfileNickname from '@/components/profile/nickname/index.vue'

const emits = defineEmits(['back', 'avatar'])
const profileStore = useProfileStore()
const signature = ref('')
const nicknameShow = ref(false)
const userInfo = computed<UserInfo | null>(() => profileStore.userInfo)

const { run, loading } = useRequest(updateSignature, {
	showLoading: true,
	showSuccess: true,
	showError: true,
	onSuccess: () => {
		profileStore.getUserInfo()
		emits('back')
	}
})
const save = () => {
	run({ signature: signature.value })
}

watch(
	() => profileStore.userInfo,
	() => {
		signature.value = profileStore.userInfo?.signature || ''
	},
	{ immediate: true }
)

defineExpose({ save })
</script>
